<template>
	<view>
		<view class="bkcolor">
			
			<view class="title">
				<view class="back" @click="back">
					<image :src="baseUrl + 'images/static/home/back.png'" class="bk"></image>
				</view>
				<view class="titleName">上传/修改简历</view>

			</view>
		</view>
		<view class="content">

			<view class="contentform">
				<u-form :model="form" ref="uForm">
					<u-form-item label="姓名" prop="name" label-width='auto'>
						<u-input v-model="form.name" placeholder='请输入真实姓名' />
					</u-form-item>
					<u-form-item label="性别" prop="sex" label-width='auto'>

						<u-radio-group v-model="form.gender">
							<u-radio v-for="(item, index) in list" :key="index" :name="item.name"
								:disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
						</radio-group>
					</u-form-item>
					<u-form-item label="毕业学院" prop="colleges" label-width='auto'>
						<u-input v-model="form.colleges" placeholder='如:北京大学' />
					</u-form-item>
					<u-form-item label="语种" prop="expertise" label-width='auto'>
						<u-input v-model="form.expertise" placeholder='如:英语,日语' />
					</u-form-item>
					<!-- <u-form-item label="级别" prop="level" label-width='auto'>
						<u-input v-model="form.level" type='number' />
					</u-form-item> -->
					<u-form-item label="服务类型" prop="skills" label-width='auto'>
						<u-input v-model="form.skills" placeholder='如:会议同传,陪同翻译' />
					</u-form-item>
					<u-form-item label="服务经验" prop="experience" label-width='auto'>
						<u-input v-model="form.experience" type='number' placeholder='请输入经验/年限' />
					</u-form-item>
					<u-form-item label="服务地址" prop="city" label-width='auto'>
						<u-input v-model="form.city" placeholder='如:成都,上海' />
					</u-form-item>
					<u-form-item label="联系方式" prop="phoneNumber" label-width='auto'>
						<u-input v-model="form.phoneNumber" placeholder='请输入联系方式' />
					</u-form-item>
					<u-form-item label="价格范围" prop="Price" label-width='auto' label-position='top'>
						<!-- <u-input v-model="form.Price" placeholder='如:500,1000'/> -->
						<view class="inputPirce">
							<u-input v-model:value="form.Price[0]" style="width: 222rpx; text-align: center;border: 1rpx solid #ccc; " placeholder="请输入价格" type="number" />
							<u-input class="site-input-split" style="width: 30rpx; border-left: 0; pointer-events: none"
								u placeholder="~" disabled />
							<u-input v-model:value="form.Price[1]"  style="width: 222rpx; text-align: center;border: 1rpx solid #ccc; " placeholder="请输入价格" type="number" /> 
							<text>元/天</text>
						</view>
					</u-form-item>

					<u-form-item label="毕业证书上传" prop="diploma" label-width='auto'>
						<u-upload ref="uUploadDiploma" :action="actionDiploma" :file-list="fileList"
							:auto-upload="false" max-count="1" :form-data="sendData"
							@on-success="handleUploadSuccessDiploma"></u-upload>
						<!-- <u-button @click="uploadDiploma">提交</u-button> -->
					</u-form-item>
					<u-form-item label="翻译证书上传" prop="TranslationBook" label-width='auto'>
						<!-- <u-button
							@click="uploadTranslationBook">提交</u-button> -->
						<u-upload ref="uUploadTranslationBook" :form-data="sendData" :action="actionTranslationBook"
							:file-list="fileLists" :auto-upload="false" max-count="1"
							@on-success="handleUploadSuccessTranslationBook"></u-upload>
						<!--  -->
					</u-form-item>
					<u-form-item label="个人履历描述" prop="resume" label-width='auto' label-position='top'>
						<u-input v-model="form.resume" type="textarea" height="220" placeholder='请输入简历描述' maxlength='500' />
					</u-form-item>

				</u-form>

			</view>
			<view class="buttomBTN">
				<view class="submitBtn">
					<u-button type="primary" @click="submit">提交</u-button>
				</view>
			</view>
		</view>
		<!-- 简历提交成功弹出层 -->
		<!-- 简历提交成功弹出层 -->
		        <view v-if="showNotice" class="notice">
		            <image :src="baseUrl + 'images/static/editResume/Mask group@2x.png'" mode="" class="noticeImg"></image>
		            <image @click="hideNotice" :src="baseUrl + 'images/static/editResume/Frame@2x.png'" mode="" class="cancel" ></image>
		            <view class="noticeTxt">
		                已成功提交，我们将在24小时内完成审核，审核通过将在译查查展示您的履历
		            </view>
		        </view>
		        <!-- 蒙版层 -->
		        <view v-if="showNotice" class="mask" @click="hideNotice"></view>
	</view>

</template>

<script>
	import {
		request,
		baseUrl
	} from '../../http/request.js';
	export default {
		data() {
			return {
				 showNotice: false,
				baseUrl: baseUrl,
				sendData: {
					_id: ""
				},
				list: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},

				],
				form: {
					experience: '',
					// name: '',
					// intro: '',
					gender: '',
					// colleges: '',
					// skills: '',
					phoneNumber:'',
					Price: [],
					// city: '',
					// colleges: '',
					// resume:'',
					// expertise:''

				},

				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					gender: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur'],
					}],
					colleges: [{
						required: true,
						message: '请输入毕业学院',
						trigger: ['change', 'blur'],
					}],
					expertise: [{
						required: true,
						message: '请输入语种',
						trigger: ['change', 'blur'],
					}],
					level: [{
						required: true,
						message: '请输入级别',
						trigger: ['change', 'blur'],
					}],
					skills: [{
						required: true,
						message: '请输入服务类型',
						trigger: ['change', 'blur'],
					}],
					city: [{
						required: true,
						message: '请输入服务地址',
						trigger: ['change', 'blur'],
					}],
				
					resume: [{
						required: true,
						message: '请输入个人履历描述',
						trigger: ['change', 'blur'],
					}],
				},
				// 上传地址
				actionDiploma: `${baseUrl}upload/uploadResume`,
				actionTranslationBook: `${baseUrl}upload/uploadTranslationBook`,
				fileList: [],
				fileLists: [],
			}

		},
		onLoad() {
			this.getUseResume()
		},
		onShow() {
			this.sendData._id = uni.getStorageSync("_id")
			
		},
		
		methods: {
			//返回
			back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			 hideNotice() {
			                this.showNotice = false;
			            },
			
			//获取个人简历信息回显
			async getUseResume(){
				 const data=await this.$http.LoginHttp.getUseResume()
				 console.log("用户简历信息",data)
				 if(data.code==200){
					this.form.city=data.Resume.city[0]
					this.form.colleges=data.Resume.colleges
					this.form.experience=data.Resume.experience
					this.form.expertise=data.Resume.expertise
					this.form.gender=data.Resume.gender
					this.form.name=data.Resume.name	
					this.form.resume=data.Resume.resume
					this.form.skills=data.Resume.skills
					this.form.Price=data.Resume.Price
					this.form.phoneNumber=data.Resume.phoneNumber
					if(data.Resume.TranslationBookUrl){
						this.fileLists.push({
							url:data.Resume.TranslationBookUrl
						})
					}
					if(data.Resume.diplomaUrl){
						this.fileList.push({
							url:data.Resume.diplomaUrl
						})
					}
				 }
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						console.log("表单值", this.form)

						this.$http.LoginHttp.editResum(this.form).then(res => {
							console.log("返回的信息", res)
							if (res.code == 200) {
								uni.$u.toast(res.message);
								this.$refs.uUploadDiploma.upload();
								this.$refs.uUploadTranslationBook.upload();
								
									this.showNotice = true;
							}
						}).catch(error => {
							console.log("错误的信息", error)
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			//上传毕业证书
			// uploadDiploma() {
			// 	this.$refs.uUploadDiploma.upload();
			// 	console.log("123", this.$refs.uUploadDiploma)
			// },
			// //上传翻译证书
			// uploadTranslationBook() {
			// 	this.$refs.uUploadTranslationBook.upload();
			// 	console.log("456")
			// },
			// handleUploadSuccess(response, file, fileList) {
			// 	console.log('上传成功', response);
			// 	// 在这里处理上传成功的结果...
			// 	if (response.code == 200) {
			// 		uni.$u.toast(response.message);
			// 	} else {
			// 		uni.$u.toast(response.message);
			// 	}
			// },
			handleUploadSuccessDiploma(response, file, fileList) {
				console.log('上传成功', response);
				// 在这里处理上传成功的结果...
				if (response.code == 200) {
					uni.$u.toast(response.message);
				} else {
					uni.$u.toast(response.message);
				}
			},
			handleUploadSuccessTranslationBook(response, file, fileList) {
				console.log('上传成功', response);
				// 在这里处理上传成功的结果...
				if (response.code == 200) {
					uni.$u.toast(response.message);
				} else {
					uni.$u.toast(response.message);
				}
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		

	}
</script>

<style lang="scss">
	.bkcolor {
		overflow: auto;
		width: 100%;
		height: 400rpx;
		background: linear-gradient(to right, #C1E1FD, #B6DBFE);
		background: linear-gradient(to bottom, #C1E1FD, #F6F6F6);
		position: relative;

		.title {
			width: 750rpx;
			height: 88rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			// background-color: pink;
			position: absolute;
			top: 88rpx;
			display: flex;
			justify-items: center;
			padding: 0 17rpx;
			margin-bottom: 200rpx;
		}

		.back {
			height: 88rpx;
			line-height: 88rpx;
		}

		.bk {
			width: 48rpx;
			height: 48rpx;
			margin-top: 20rpx;

		}

		.titleName {
			width: 638rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.9);
		}
	}

	.content {
		background-color: #F6F6F6;

		.contentform {
			width: 686rpx;
			position: relative;
			top: -200rpx;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 20rpx 20rpx;
		}
	}

	.buttomBTN {
		width: 100%;
		height: 200rpx;
		background-color: #FFFFFF;
		padding-top: 40rpx;
	}

	.submitBtn {
		width: 686rpx;
		margin: 0 auto;

	}

	.inputPirce {
		display: flex;
		text-align: center;
		justify-content: space-evenly;
	}
	.notice{
		width: 600rpx;
		height: 454rpx;
		background: #F4FBFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		text-align: center;
		position: fixed;
		top: 50%;
		 left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		.noticeImg{
			width: 446rpx;
			height: 311rpx;
		}
		.cancel{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 25rpx;
			right: 40rpx;
		}
		.noticeTxt{
			width: 556rpx;
			height: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #00A0F7;
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			
		}
	}
	.mask{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.39);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
</style>